<template>
  <div class="homeBox">
    <router-view/>
    <!-- 底部按钮 -->
    <footer class="btn">
      <div @click="fuwuFun" :class="{active1: isActive1}">
        <span class="iconfont icongengduofuwu fuwu"></span>
        <span class="wenzi">微服务</span>
      </div>
      <div @click="zhongxinFun" :class="{active2: isActive2}">
        <span class="iconfont icongerenzhongxin zhongxin"></span>
        <span class="wenzi">个人中心</span>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isActive1: true,
      isActive2: false
    }
  },
  created () {},
  methods: {
    fuwuFun () {
      this.isActive2 = false
      this.isActive1 = true
      this.$router.push('/sevice')
    },
    zhongxinFun () {
      this.isActive1 = false
      this.isActive2 = true
      this.$router.push('/personal')
    }
  }

}
</script>

<style lang="less" scoped>
  .homeBox {
    position: relative;
    height: 100%;
    background-color: #F7F7F7;
  }

  footer {
    position: absolute;
    box-sizing: border-box;
    height: 60px;
    width: 100%;
    padding: 10px 0;
    border-top: 1px solid #E4E4E4;
    display: flex;
    bottom: 0;

    div {
      flex: 1;
      display: flex;
      color: #ccc;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 13px;

      .fuwu, .zhongxin {
        font-size: 28px;
        font-weight: 400;
      }
    }
  }
  .active1 {
    color: #F59E0E;
  }
  .active2 {
    color: #F59E0E;
  }
</style>
